<!--
 * @Author: tian_biao
 * @Date: 2021-08-06 08:40:12
 * @LastEditTime: 2021-08-07 10:30:07
 * @Description: 新增缺陷
-->
<template>
    <article class="bg_4dbfae">
        <!-- 标题-->
        <div class="title-bg">
            <Theader :title="title" :headerStyle="{color:'#333'}" :textStyle="{color:'#333'}"
                :titleStyle="{color:'#333'}"></Theader>
        </div>
        <div class="addCon">
            <van-field :border="border" readonly label="变电站：" v-model="addData.substationName" />
            <van-field :border="border" readonly label="缺陷设备：" v-model="addData.deviceName" />
            <van-field :border="border" readonly label="设备类型：" v-model="addData.deviceTypeName" />
            <div id="defectLib">
                <van-field :border="border" @click="openDefectLib" readonly v-model="addData.classificationStandardText"
                    placeholder="请选择" label="分类依据：" input-align="left" right-icon="arrow-up" />
                <van-field :border="border" @click="openDefectLib" readonly v-model="addData.deviceKindName"
                    placeholder="请选择" label="设备种类：" input-align="left" right-icon="arrow-up" />
                <van-field :border="border" @click="openDefectLib" readonly v-model="addData.defectPartText"
                    placeholder="请选择" label="缺陷部件：" input-align="left" right-icon="arrow-up" />
                <van-field :border="border" @click="openDefectLib" readonly v-model="addData.partTypeText"
                    placeholder="请选择" label="部件种类：" input-align="left" right-icon="arrow-up" />
                <van-field :border="border" @click="openDefectLib" readonly v-model="addData.defectPositionText"
                    placeholder="请选择" label="缺陷部位：" input-align="left" right-icon="arrow-up" />

                <van-field :border="border" @click="openDefectLib" readonly v-model="addData.defectNatureText"
                    placeholder="请选择" label="缺陷性质：" input-align="left" right-icon="arrow-up" />
            </div>
            <!-- 缺陷内容 -->
            <div class="descBox">
                <div>缺陷描述：</div>
                <div class="textAreaBox">
                    <van-field :border="border" style="white-space:pre;" class="descField"
                        v-model.trim="addData.defectDescText" rows="2" autosize type="textarea" maxlength="256"
                        placeholder="请添加缺陷描述" />
                    <img class="asr" src="../../images/ly2.png">
                </div>
            </div>
            <!-- 备注 -->
            <div class="descBox">
                <div>备注：</div>
                <div class="textAreaBox">
                    <van-field :border="border" style="white-space:pre;" class="descField"
                        v-model.trim="addData.defectContent" rows="2" autosize type="textarea" maxlength="256"
                        placeholder="请添加备注" />
                    <img class="asr" src="../../images/ly2.png">
                </div>
            </div>
            <!-- 照片/视频 -->
            <div class="descBox addfile">
                <div>照片/视频：</div>
                <div class="addfileBtn"><img src="../../images/add.png">
                    <div class="addText">添加照片/视频</div>
                </div>
            </div>
            <!-- 显示图片和视频 -->
            <div class="descBox addfile">
                <!-- 视频用缩略图 -->
                <div class="imgBox">
                    <van-image width="80" height="80" lazy-load src="https://img01.yzcdn.cn/vant/cat.jpeg" />
                    <img class="delImg" src="../../images/del.png">
                </div>
            </div>
            <!-- 录音 -->
            <div class="descBox addfile">
                <div>录音：</div>
                <div class="addfileBtn"><img src="../../images/ly3.png">
                    <div class="addText">按住录音</div>
                </div>
            </div>
            <!-- 显示录音 -->
            <div class="descBox addfile">
                <div class="imgBox">
                    <div class="lyfile">
                        <img src="../../images/ly1.png">
                        <div>60S</div>
                    </div>
                    <img class="delLy" src="../../images/del.png">
                </div>
            </div>
            <van-field :border="border" readonly label="发现方式：" v-model="addData.findWay" />
            <van-field :border="border" readonly label="发现人：" v-model="addData.findUserName" />
            <van-field :border="border" readonly label="发现日期：" v-model="addData.findTime" />
        </div>
        <defect-library ref="defectLib" :defectLibShow='defectLibShow' @close="onClose"
            :deviceTypeId='addData.deviceType'></defect-library>
        <div class="btnBox">
            <div class="save">保存</div>
            <div class="emit">提交</div>
        </div>
    </article>
</template>

<script type="text/javascript">
    import Theader from "../component/header"
    import Utils from '@/utils/util'
    const PinyinEngine = require('pinyin-engine');
    import DefectLibrary from "./DefectLibrary.vue"
    export default {
        name: 'addDefect',
        components: {
            Theader,
            DefectLibrary
        },
        data() {
            return {
                title: "添加缺陷",
                border: false,
                userInfo: JSON.parse(localStorage.getItem('userInfo')),
                defectLibShow: false,// 选择缺陷库弹窗
                addData: {
                    substationName: "东善桥变",
                    substationId: "",
                    deviceName: "1号主变A相",
                    deviceId: "",
                    deviceTypeName: "主变压器",
                    deviceTypeId: "",
                    attachmentList: [],//附件
                    auditorList: [],// 文件名
                    classificationStandard: "",// 分类依据id
                    classificationStandardText: "",// 分类依据text
                    defectContent: "",// 缺陷内容
                    defectDesc: "",// 缺陷描述
                    defectDescText: "",// 缺陷描述
                    defectId: "",// 缺陷id
                    defectNature: "",// 缺陷性质
                    defectNatureText: "",// 缺陷性质
                    defectPosition: "",// 缺陷部位
                    defectPositionText: "",// 缺陷部位
                    findTime: "2021/07/07 18:30:00",// 发现人时间
                    findWay: "人工巡视",// 发现方式
                    findUserId: "",// 发现人id
                    findUserName: "王染",// 发现人名字
                    inspectTaskId: "",// 检修任务id
                    roleCode: "",
                    substationRfid: "010020000000000025287847",// 变电站rfid
                    userId: "",// 登录人id
                }
            }
        },

        computed: {

        },

        methods: {
            /**
            * @description: 打开缺陷库
            * @param {*}
            * @return {*}
            */
            openDefectLib() {
                // if (Utils.baseUtil.isEmptyString(this.addData.deviceType)) {
                //     this.$toast("请选择设备！")
                //     return
                // }
                this.$refs.defectLib.defectLibList = []
                // 执行获取缺陷库
                this.$refs.defectLib.getDefectDicInfo()
                this.defectLibShow = true
            },/**
             * @description: 选择缺陷库关闭
             * @param {*}
             * @return {*}
             */
            onClose(val) {
                // 这里赋值缺陷库
                if (!Utils.baseUtil.isEmptyString(val)) {
                    // 缺陷部位
                    this.addData.defectPosition = val.defectPosition
                    this.addData.defectPositionText = val.defectPositionText
                    // 分类依据
                    this.addData.classificationStandard = val.classificationStandard
                    this.addData.classificationStandardText = val.classificationStandardText
                    // 缺陷性质
                    this.addData.defectNature = val.defectNature
                    this.addData.defectNatureText = val.defectNatureText
                    // 缺陷描述
                    this.addData.defectDesc = val.defectDescCode
                    this.addData.defectDescText = val.defectDesc
                }
                // 缺陷库窗口关闭
                this.defectLibShow = false
            },
        },

        watch: {

        },
        mounted() {

        },
        created() {
            console.log("添加缺陷");
        },

    }
</script>

<style scoped>
    article {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }

    .bg_4dbfae {
        background: #f5f6fa !important;
    }

    .title-bg {
        height: 50px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
    }

    .addCon {
    width: 95%;
    max-height: calc(100vh - 9.5rem);
    overflow-y: auto;
    margin: 0 auto;
    margin-top: 3%;
    padding-bottom: 3%;
    border-radius: 4px;
    background-color: #fff;
    -webkit-box-shadow: 0px 0px 1px 0px #cccccc;
    box-shadow: 0px 0px 1px 0px #cccccc;
}

    .van-field__control:read-only {
        cursor: default;
        text-align: left;
    }

    #defectLib>.van-cell>.van-cell__value {
        background: #F5F6F7 !important;
        border-radius: 4px !important;
    }

    /* 缺陷描述区域 */
    .descBox {
        /* width: 100vw; */
        padding: 0 16px;
        color: #646566;
        font-size: 14px;
        margin-top: 20px;
    }

    .descBox .descField {
        border: 1px solid #eee;
        margin-top: 10px;
    }

    .addfile {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .addfileBtn {
        display: flex;
    }

    .addfileBtn>img {
        width: 1rem;
        height: 1rem;
    }

    .addfileBtn>div {
        margin-left: 0.2rem;
        line-height: 1rem;
    }

    .imgBox {
        position: relative;
    }

    .delImg {
        width: 1rem;
        height: 1rem;
        position: absolute;
        top: -5%;
        right: -5%;
    }

    .delLy {
        width: 1rem;
        height: 1rem;
        position: absolute;
        top: -20%;
        right: -3%;
    }

    .lyfile {
        width: 12rem;
        height: 2rem;
        border-radius: 4px;
        background: #99DDD1;
        display: flex;
        align-items: center;
    }

    .lyfile>img {
        width: 1.5rem;
        height: 1.5rem;
        margin-left: 1rem;
    }

    .lyfile>div {
        margin-left: 1rem;
        color: #0EB295;
        font-family: Source Han Sans CN;
        font-weight: regular;
        font-size: 13px;
        line-height: normal;
        letter-spacing: 0px;
        text-align: left;
    }

    .textAreaBox {
        position: relative;
    }

    .asr {
        width: 1rem;
        height: 1rem;
        position: absolute;
        bottom: 10%;
        right: 2%;
    }

    .btnBox {
        width: 100vw;
        height: 4rem;
        margin-top: 1rem;
        background-color: #fff;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .btnBox>div {
        width: 35%;
        height: 2rem;
        border-radius: 4px;
        text-align: center;
        line-height: 2rem;
    }

    .save {
        color: #666666;
        background: #FFFFFF;
        border: 1px solid #CCCCCC;
    }

    .emit {
        color: #FFFFFF;
        background: #0EB295;
        border: 1px solid #0EB295;
    }
</style>